<template>
    <el-dialog title="认领任务" :visible.sync="dialogFormVisible" width="380px">
        <div style="color: #F44336;"> 请先与主管确认任务完成时间在填写</div>
        <el-form ref="formData" :rules="rules" :model="formData">
            <el-form-item prop="date">
                <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    size="small"
                    @change="getDate"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item prop="isHelper">
                <el-radio v-model="formData.isHelper" label="1">需要协助</el-radio>
                <el-radio v-model="formData.isHelper" label="0">独立完成</el-radio>
            </el-form-item>
            <el-form-item prop="helperContent">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5}"
                    placeholder="请输入内容"
                    v-model="formData.helperContent"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm('formData')"
                size="small"
                :disabled="loading"
                :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
            >确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
const ERR_OK = 200;
export default {
    props: {},
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                }
            },
            formData: {
                userId: this.$store.getters.userId,
                visionDemandId: "",
                isHelper: "1",
                helperContent: "",
                startTime: "",
                endTime: "",
                date: []
            },
            rules: {
                date: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "change"
                    }
                ],
                helperContent: [
                    {
                        required: true,
                        message: "请输入内容",
                        trigger: "blur"
                    }
                ]
            },
            dialogFormVisible: false,
            loading: false
        };
    },
    methods: {
        show(item) {
            this.formData.visionDemandId = item.visionDemandId;
            this.dialogFormVisible = true;
            if (this.$refs["formData"]) {
                this.$refs["formData"].resetFields();
            }
        },
        getDate(date) {
            if (date) {
                this.formData.startTime = date[0];
                this.formData.endTime = date[1];
            } else {
                this.formData.startTime = "";
                this.formData.endTime = "";
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$ajax({
                        method: "post",
                        url:
                            this.GLOBAL.oaVisionDemand +
                            "/visionDemandStatus/receiveTaskById",
                        data: this.formData
                    }).then(res => {
                        this.loading = false;
                        if (res.data.code === ERR_OK) {
                            this.$message.success(res.data.msg);
                            this.dialogFormVisible = false;
                            this.$emit("loadData");
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="stylus" scoped>
.el-form-item {
    margin-bottom: 10px;

    .el-date-editor {
        width: 100%;
    }
}
</style>
